<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加商品</title>
<link rel=stylesheet type=text/css href="css/input.css">
<style type="text/css">
	body{
		background:#dae4fe;
		margin:0;
	}
	BODY {
		FONT-SIZE: 14px;
		FONT-FAMILY: "宋体"; 
	}
	OL LI {
		MARGIN: 0px;
	}
	#con {
		FONT-SIZE: 12px;
		WIDTH: 600px;
		margin:20px;
	}
	#tags {
		PADDING-RIGHT: 0px;
		PADDING-LEFT: 0px;
		PADDING-BOTTOM: 0px;
		MARGIN: 0px 0px 0px 0px;
		WIDTH: 400px;
		PADDING-TOP: 0px;
		HEIGHT: 23px
	}
	#tags LI {
		BACKGROUND: url(images/image/tagleft.gif) no-repeat left bottom;
		FLOAT: left;
		MARGIN-RIGHT: 1px;
		LIST-STYLE-TYPE: none;
		HEIGHT: 23px
	}
	#tags LI A {
		PADDING-RIGHT: 10px;
		PADDING-LEFT: 10px;
		BACKGROUND: url(images/image/tagright.gif) no-repeat right bottom;
		FLOAT: left;
		PADDING-BOTTOM: 0px;
		COLOR: #999;
		LINE-HEIGHT: 23px;
		PADDING-TOP: 0px;
		HEIGHT: 23px;
		TEXT-DECORATION: none
	}
	#tags LI.emptyTag {
		BACKGROUND: none transparent scroll repeat 0% 0%;
		WIDTH: 4px
	}
	#tags LI.selectTag {
		BACKGROUND-POSITION: left top;
		MARGIN-BOTTOM: -2px;
		POSITION: relative;
		HEIGHT: 25px
	}
	#tags LI.selectTag A {
		BACKGROUND-POSITION: right top;
		COLOR: #000;
		LINE-HEIGHT: 25px;
		HEIGHT: 25px
	}
	#tagContent {
		BORDER-RIGHT: #aecbd4 1px solid;
		PADDING-RIGHT: 1px;
		BORDER-TOP: #aecbd4 1px solid;
		PADDING-LEFT: 1px;
		PADDING-BOTTOM: 1px;
		BORDER-LEFT: #aecbd4 1px solid;
		PADDING-TOP: 1px;
		BORDER-BOTTOM: #aecbd4 1px solid;
		BACKGROUND-COLOR: #fff
	}
	.tagContent {
		PADDING-RIGHT: 10px;
		DISPLAY: none;
		PADDING-LEFT: 10px;
		BACKGROUND: url(images/image/bg.gif) repeat-x;
		PADDING-BOTTOM: 10px;
		WIDTH: 576px;
		COLOR: #474747;
		PADDING-TOP: 10px;
		HEIGHT: 400px;
	}
	#tagContent DIV.selectTag {
		DISPLAY: block
	}
	.td_weizhi{
		width:85px;
		float:right;
		text-align:right;
	}
	select{
		border:1px solid #CCC;
		border-radius:3px;
	}
	hr{
		border:1px solid #EEE;
	}
	.daohang{
		font-weight:bold;
		font-size:14px;
		margin:5px;
	}
	.td_width{
		width:200px;
	}
	.chongzhi{
		width:70px;
		font-size:14px;
	}
	label{
		margin-left:45px;
		color:red;
	}
</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script>
	/* 商品名称同步 */
	function shangpin(){
		var ctid = document.getElementById("cid").value;
		document.getElementById("ctid1").value=ctid;
		document.getElementById("ctid2").value=ctid;
	}
	/* 第一个模块的ajax */
	$(function(){
		$(".def").click(function(){
			var c = $("#cid");
			var cname = c.val();
			var ctid = $("#ctid").val();
			var bid = $("#bid").val();
			$.post("addcommodity", {cname:cname,ctid:ctid,bid:bid,}, function(v){
				$("#label1").html(v);
			});
		});
	});
	/* 第一个模块的重置 */
	function chongzhi1(){
		document.getElementById("cid").value="";
		var objSelect = document.getElementById("ctid");
		var objSelect1 = document.getElementById("bid");
		for(var i=0;i<objSelect.options.length;i++ ){
		     if(objSelect.options[i].value=2){
		          objSelect.options[i].selected=true;
		          for(var i=0;i<objSelect1.options.length;i++ ){
		 		     if(objSelect1.options[i].value=2){
		 		          objSelect1.options[i].selected=true;
		 		          return;
		 		     }
		 		  }
		          return;
		     }
		}
	}
	/* 第二个模块的ajax */
	$(function(){
		$(".def1").click(function(){
			var cname = $("#ctid1").val();
			var dState = $("#selectid").val();
			var dPprice = $("#dPprice").val();
			var dPrice = $("#dPrice").val();
			var dStock = $("#dStock").val();
			var dSales = $("#dSales").val();
			var dDescribe = $("#dDescribe").val();
			var array1 =new Array();
			var array2 =new Array();
			$("input[name=color]:checked").each(function(){ 
				array1.push($(this).val());
			});
			var color = array1.join(",");
			$("input[name=size]:checked").each(function(){ 
				array2.push($(this).val());
			});
			var size = array2.join(",");
			$.get("adddetailedcommodity",{cname:cname,dState:dState,dPprice:dPprice,
				dPrice:dPrice,dStock:dStock,dSales:dSales,
				dDescribe:dDescribe,color:color,size:size}, function(v){
					$("#label2").html(v);
			});
		});
	});
	/* 第二个模块的重置 */
	function chongzhi2(){
		document.getElementById("ctid1").value="";
		document.getElementById("dPprice").value="";
		document.getElementById("dPrice").value="";
		document.getElementById("dStock").value="";
		document.getElementById("dSales").value="";
		document.getElementById("dDescribe").value="";
		var objchecked = document.getElementsByName("color");
		var objchecked1 = document.getElementsByName("size");
		for(var i=0;i<objchecked.length;i++ ){
			
			objchecked[i].checked=false;
		}
		for(var i=0;i<objchecked1.length;i++ ){
			objchecked1[i].checked=false;
	    }
	}
	/*第三个模块的ajax*/
	$(function(){
		$(".def2").click(function(){
			var cid = $("#cid3").val();
			alert(cid);
			var fileName = $("fileName").val();
			$.get("shangchuan",{cid:cid,fileName:fileName},function(v){
				$("#label3").html(v);
			});
		});
	});
	/* 第四个模块的ajax */
	$(function(){
		$(".def3").click(function(){
			var cname = $("#ctid2").val();
			var caname = $("#caName").val();
			var cavalue = $("#caValue").val();
			$.get("addcommodityattribute",{cname:cname,caname:caname,cavalue:cavalue},function(v){
				$("#label4").html(v);
			});
		});
	});
	/* 第四个模块的重置 */
	function chongzhi4(){
		document.getElementById("ctid2").value="";
		document.getElementById("caName").value="";
		document.getElementById("caValue").value="";
	}
</script>
</head>
<body>
	<div class="daohang">商品管理->添加商品</div>
	<hr>
	<DIV id=con>
	  <UL id=tags>
	    <LI id="a1" class=selectTag><A onClick="selectTag('tagContent0',this)" href="javascript:void(0)">商品基本信息</A> </LI>
	    <LI id="a2"><A onClick="selectTag('tagContent1',this)" href="javascript:void(0)">商品详细信息</A> </LI>
	    <LI id="a3"><A onClick="selectTag('tagContent2',this)" href="javascript:void(0)">商品图片信息</A> </LI>
	    <LI id="a4"><A onClick="selectTag('tagContent3',this)" href="javascript:void(0)">商品独有属性</A> </LI>
	  </UL>
	  <DIV id=tagContent>
	    <DIV class="tagContent selectTag" id=tagContent0> 
	    	<form method="post" action="">
	    		<table>
	    			<tr>
	    				<td class="td_weizhi">商品名：</td>
	    				<td class="td_width"><input id="cid" onkeyup="shangpin(),this.value=this.value.replace(/[^A-Za-z\u4e00-\u9fa5]/g,'')" name="cName"></td>
	    			</tr>
	    			<tr>
	    				<td class="td_weizhi">商品类型：</td>
	    				<td class="td_width">
	    					<select id="ctid">
	    						<c:forEach items="${ctlist}" var="ct">
	    							<option value="${ct.ctId}">${ct.ctName}</option>
	    						</c:forEach>
	    					</select>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td class="td_weizhi">品牌：</td>
	    				<td class="td_width">
	    					<select id="bid">
	    						<c:forEach items="${brandlist}" var="b">
	    							<option value="${b.bId}">${b.bName}</option>
	    						</c:forEach>
	    					</select>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td class="td_weizhi">
    						<a class="def" href="javascript:void(1)">
    							<input type="button" value="添   加">
    						</a>
	    				</td>
	    				<td class="td_width"><input onclick="chongzhi1()" class="zhongzhi" type="button" value="重   置"></td>
	    			</tr>
	    		</table>
	    		<label id="label1">
	    			
	    		</label>
	    	</form>
	    </DIV>
	    <DIV class="tagContent" id=tagContent1>
			<form action="">
				<table>
					<tr>
						<td class="td_weizhi">商品名称：</td>
						<td class="td_width"><input id="ctid1" name="cid2" onkeyup="this.value=this.value.replace(/[^A-Za-z\u4e00-\u9fa5]/g,'')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">上下架状态：</td>
						<td class="td_width">
							<select name="zhuangtai" id="selectid" 
							onfocus="this.defaultIndex=this.selectedIndex;" 
							onchange="this.selectedIndex=this.defaultIndex;"
							>
								<option value="未上架">未上架</option>
								<option>已上架</option>
								<option>已下架</option>
							</select>
						</td>
					</tr>
					<tr>
						<td class="td_weizhi">商品进价：</td>
						<td class="td_width"><input id="dPprice" name="dPprice" onkeyup="this.value=this.value.replace(/\D/g, '')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品售价：</td>
						<td class="td_width"><input id="dPrice" name="dPrice" onkeyup="this.value=this.value.replace(/\D/g, '')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品库存：</td>
						<td class="td_width"><input id="dStock" name="dStock" onkeyup="this.value=this.value.replace(/\D/g, '')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品销量：</td>
						<td class="td_width"><input id="dSales" name="dSales" onkeyup="this.value=this.value.replace(/\D/g, '')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品重量：</td>
						<td><input id="dDescribe" name="dDescribe" onkeyup="this.value=this.value.replace(/\D/g, '')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品颜色：</td>
						<td id="check1" class="td_width">
							<c:forEach items="${colorlist}" var="color">
								<input type="checkbox" id="color" name="color" value="${color.coId}">${color.coName}
							</c:forEach>
						</td>
					</tr>
					<tr>
						<td class="td_weizhi">商品尺寸：</td>
						<td id="check2" class="td_width">
							<c:forEach items="${sizelist}" var="size">
								<input type="checkbox" id="size" name="size" value="${size.sId}">${size.sName}
							</c:forEach>
						</td>
					</tr>
					<tr>
	    				<td class="td_weizhi">
    						<a class="def1" href="javascript:void(2)">
    							<input type="button" value="添   加">
    						</a>
	    				</td>
	    				<td class="td_width"><input onclick="chongzhi2()" class="zhongzhi" type="button" value="重   置"></td>
	    			</tr>
				</table>
				<label id="label2">
	    			
	    		</label>
			</form>
		</DIV>
	    <DIV class=tagContent id=tagContent2>
			<form action="shangchuan" method="post" enctype="multipart/form-data">
				<table>
					<tr>
						<td class="td_weizhi">商品名称：</td>
						<td class="td_width"><input id="cid3" name="cid3" onkeyup="this.value=this.value.replace(/[^A-Za-z\u4e00-\u9fa5]/g,'')"></td>
					</tr>
					<tr>
						<td>请选择一张图片：</td>
						<td><input type="file" id="fileName" name="fileName"></td>
					</tr>
					<tr>
	    				<td class="td_weizhi">
    						<!-- <a class="def2" href="javascript:void(3)"> -->
    							<input type="submit" value="上   传">
    						<!-- </a> -->
	    				</td>
	    				<td class="td_width"><input onclick="chongzhi4()" class="zhongzhi" type="button" value="重   置"></td>
	    			</tr>
				</table>
				<label id="label3">
	    			
	    		</label>
			</form>
		</DIV>
	    <DIV class=tagContent id=tagContent3>
			<form action="">
				<table>
					<tr>
						<td class="td_weizhi">商品名称：</td>
						<td class="td_width"><input id="ctid2" name="cId" onkeyup="this.value=this.value.replace(/[^A-Za-z\u4e00-\u9fa5]/g,'')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品独有属性：</td>
						<td class="td_width"><input id="caName" name="caName" onkeyup="this.value=this.value.replace(/[^A-Za-z\u4e00-\u9fa5]/g,'')"></td>
					</tr>
					<tr>
						<td class="td_weizhi">商品属性值：</td>
						<td class="td_width"><input id="caValue" name="caValue" onkeyup="this.value=this.value.replace(/[^A-Za-z\u4e00-\u9fa5]/g,'')"
						></td>
					</tr>
					<tr>
	    				<td class="td_weizhi">
    						<a class="def3" href="javascript:void(4)">
    							<input type="button" value="添   加">
    						</a>
	    				</td>
	    				<td class="td_width"><input onclick="chongzhi4()" class="zhongzhi" type="button" value="重   置"></td>
	    			</tr>
				</table>
				<label id="label4">
	    			
	    		</label>
			</form>
		</DIV>
	  </DIV>
	</DIV>
<p>
<SCRIPT type=text/javascript>
	function selectTag(showContent,selfObj){
		// 操作标签
		var tag = document.getElementById("tags").getElementsByTagName("li");
		var taglength = tag.length;
		for(i=0; i<taglength; i++){
			tag[i].className = "";
		}
		selfObj.parentNode.className = "selectTag";
		// 操作内容
		for(i=0; j=document.getElementById("tagContent"+i); i++){
			j.style.display = "none";
		}
		document.getElementById(showContent).style.display = "block";
	}
</SCRIPT>
</body>
</html>